<template>
  <div class="darkPat">
    <!-- 顶部导航 插槽定制 -->
    <div class="header">
      <van-nav-bar left-arrow class="header_container" :border="false">
        <div class="title" slot="title">
          <van-tabs
            v-model="active"
            color="#fff"
            line-height="11"
            :border="false"
            title-active-color="#fff"
            title-inactive-color="#fff"
            class="title_nav"
            @change="selectTab"
          >
            <van-tab title="手机"></van-tab>
            <van-tab title="笔记本"></van-tab>
            <van-tab title="手表"></van-tab>
            <van-tab title="相机"></van-tab>
          </van-tabs>
        </div>
        <van-icon class="right" name="service" slot="right" />
      </van-nav-bar>

      <!--   倒计时   -->
      <div class="count_down_container">
        <van-count-down :time="time" class="count_down_time">
          <template v-slot="timeData">
            <span class="item">{{ timeData.hours }}</span>
            <em class="dot">:</em>
            <span class="item">{{ timeData.minutes }}</span>
            <em class="dot">:</em>
            <span class="item">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
        <p class="notice">本场倒计时</p>
      </div>
    </div>

    <!-- 下拉菜单 -->
    <div class="select">
      <van-dropdown-menu active-color="#ff3b3e" class="select_tmp">
        <!-- 品牌型号 -->
        <van-dropdown-item class="ropdown_menu_item" title="品类型号" ref="item1">
          <div class="bottom_select_item">
            <van-tree-select
              active-color="#ee0a24"
              :items="items"
              :active-id.sync="activeId"
              :main-active-index.sync="activeIndex"
              @click-nav="clickNav"
              @click-item="clickItem"
            />
          </div>
          <div class="bottom_btn">
            <van-button class="reset select_btn" type="default" @click="resetBtn1">重置</van-button>
            <van-button class="confirm select_btn" type="default" @click="confirmBtn1">确认</van-button>
          </div>
        </van-dropdown-item>

        <!-- 品牌等级 -->
        <van-dropdown-item class="ropdown_menu_item" title="品类等级" ref="item3">
          <van-radio-group v-model="gradeSelect" class="class_select_content">
            <van-cell-group class="class_select_group">
              <van-cell class="class_select_item" title="全部" clickable @click="gradeSelect = 'All'">
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="All" />
              </van-cell>
            </van-cell-group>
            <van-cell-group class="class_select_group">
              <van-cell class="class_select_item" title="A" clickable @click="gradeSelect = 'A'">
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="A" />
              </van-cell>
            </van-cell-group>
            <van-cell-group class="class_select_group">
              <van-cell
                class="class_select_item"
                title="B+2"
                clickable
                @click="gradeSelect = 'B+2'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="B+2" />
              </van-cell>
            </van-cell-group>
            <van-cell-group class="class_select_group">
              <van-cell class="class_select_item" title="C" clickable @click="gradeSelect = 'C'">
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="C" />
              </van-cell>
            </van-cell-group>
            <van-cell-group class="class_select_group">
              <van-cell class="class_select_item" title="D" clickable @click="gradeSelect = 'D'">
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="D" />
              </van-cell>
            </van-cell-group>
            <van-cell-group class="class_select_group">
              <van-cell
                class="class_select_item"
                title="E+2"
                clickable
                @click="gradeSelect = 'E+2'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="E+2" />
              </van-cell>
            </van-cell-group>
            <van-cell-group class="class_select_group">
              <van-cell
                class="class_select_item"
                title="F+2"
                clickable
                @click="gradeSelect = 'F+2'"
              >
                <van-radio checked-color="#FF3B3E" slot="right-icon" name="F+2" />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
          <div class="bottom_btn">
            <van-button class="reset select_btn" type="default" @click="resetBtn3">重置</van-button>
            <van-button class="confirm select_btn" type="default" @click="confirmBtn3">确认</van-button>
          </div>
        </van-dropdown-item>

        <!-- 状态 -->
        <van-dropdown-item class="ropdown_menu_item" title="状态"></van-dropdown-item>

        <!-- 搜索 -->
        <van-button icon="search" class="search_btn" @click="showPopup">搜</van-button>
      </van-dropdown-menu>
    </div>

    <!-- 商品列表 -->
    <div class="goodsList">
      <div class="goods_item" v-for="(item, index) in goodsList" :key="index">
        <div class="goods_item_top">
          <div class="goods_item_top_left">
            <van-image class="goods_item_img" :src="item.images" />
          </div>
          <div class="goods_item_top_right">
            <div class="goods_item_right_top">
              <span class="goods_item_grade">{{ item.grade }}</span>
              <h3 class="goods_item_title">{{ item.title }}</h3>
            </div>
            <p class="goods_item_info">{{ item.info }}</p>
          </div>
        </div>
        <div class="goods_item_bottom">
          <p class="goods_item_bottom_price">起拍价{{item.openingBid}} <span style="color: #333333;">参考价￥<i style="">{{item.referencePrice}}</i></span> </p>
          <van-button type="default" class="goods_item_bottom_btn">修改</van-button>
        </div>
      </div>
    </div>

    <!-- 右侧 搜索 弹出层 -->
    <van-popup
      class="search_popup"
      v-model="show"
      position="right"
      closeable
      close-icon="arrow-left"
      close-icon-position="top-left"
      :style="{ width: '100%', height: '100%'}"
    >
      <div class="popup_header">
        <h1 class="title">型号搜索</h1>
      </div>
      <div class="search_input">
        <van-cell-group style="search_input_gruop">
          <van-field class="search_input_item" v-model="modelNum" placeholder="输入型号搜索（支持平台所有品类）" />
        </van-cell-group>
        <van-button type="default" class="cancel" @click="show = false">取消</van-button>
      </div>
      <!-- 热门搜索 -->
      <div class="container">
        <div class="container_header">
          <h1 class="container_header_title">热门搜索</h1>
        </div>
        <div class="container_content_item">
          <span
            class="search_item"
            v-for="(item, index) in topSearch"
            :key="index"
            @click="selectTop(item.name)"
          >{{item.name}}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { NavBar, Field, Image } from "Vant";
export default {
  name: "darkPat",
  data() {
    return {
      active: "0",
      time: 30 * 60 * 60 * 1000,
      type: "", // 品类型号
      gradeSelect: "All", // 品类等级
      // 下拉菜单
      /**
       * 品类型号顶部筛选
       */
      radio: 0, // 默认品类型号顶部筛选选中状态
      typeSelectItem: [
        { id: 1, value: "手机" },
        { id: 2, value: "平板" },
        { id: 3, value: "笔记本" },
        { id: 4, value: "其他数码" }
      ],
      /**
       * 品类型号底部筛选
       */
      items: [
        {
          // 导航名称
          text: "全部",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "苹果 iPhone 7Plus",
              id: 2
            },
            {
              text: "苹果 iPhone 7Plus",
              id: 3
            }
          ]
        },
        {
          // 导航名称
          text: "苹果",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "华为vxada1",
              id: 2
            },
            {
              text: "华为12",
              id: 3
            }
          ]
        },
        {
          // 导航名称
          text: "荣耀",
          // 导航节点额外类名
          className: "my-class",
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: "全部",
              // id，作为匹配选中状态的标识符
              id: 1
            },
            {
              text: "荣耀1asgd",
              id: 2
            },
            {
              text: "荣耀2sfds",
              id: 3
            }
          ]
        }
      ],
      activeId: 1,
      activeIndex: 0,
      show: false, // 右侧弹出
      modelNum: "", // 型号搜索
      topSearch: [
        { id: 1, name: "苹果 iPhone X" },
        { id: 2, name: "苹果 iPhone 8" },
        { id: 3, name: "苹果 iPhone 8Plus" },
        { id: 4, name: "华为P20 Pro" }
      ], // 热门搜索
      // 商品列表
      goodsList: [
        {
          id: 1,
          images: "https://img.yzcdn.cn/vant/cat.jpeg",
          title: "苹果iPhone 11 Pro Max",
          info: "国行展示机 64G  保修一个月以上  绿色 A2220",
          price: "￥8,150",
          grade: "A+",
          openingBid: '7800',
          referencePrice: '8,190'
        },
        {
          id: 2,
          images: "https://img.yzcdn.cn/vant/apple-1.jpg",
          title: "苹果iPhone 11 Pro Max",
          info: "国行展示机 64G  保修一个月以上  绿色 A2220",
          price: "￥8,150",
          grade: "A+",
          openingBid: '7800',
          referencePrice: '8,190'
        },
        {
          id: 3,
          images: "https://img.yzcdn.cn/vant/cat.jpeg",
          title: "苹果iPhone 11 Pro Max",
          info: "国行展示机 64G  保修一个月以上  绿色 A2220",
          price: "￥8,150",
          grade: "A+",
          openingBid: '7800',
          referencePrice: '8,190'
        },
        {
          id: 4,
          images: "https://img.yzcdn.cn/vant/apple-1.jpg",
          title: "苹果iPhone 11 Pro Max",
          info: "国行展示机 64G  保修一个月以上  绿色 A2220",
          price: "￥8,150",
          grade: "A+",
          openingBid: '7800',
          referencePrice: '8,190'
        }
      ]
    };
  },
  created() {},
  methods: {
    // tab 切换
    selectTab() {
      console.log(this.active);
    },

    // 品类型号顶部筛选
    topSelect(e) {
      console.log(e, this.radio);
    },
    // 品类型号底部部筛选
    clickNav(index) {
      console.log(index);
    },
    clickItem(data) {
      console.log(data);
    },
    // 重置 确认
    resetBtn1() {
      this.activeIndex = 0;
      this.activeId = 1;
    },
    confirmBtn1() {
      console.log(this.activeIndex, this.activeId);
      this.$refs.item1.toggle();
    },

    // 中间按钮
    resetBtn3() {
      this.gradeSelect = "1";
    },
    confirmBtn3() {
      console.log(this.gradeSelect);
      this.$refs.item3.toggle();
    },

    // 右侧搜索弹出层
    showPopup() {
      this.show = true;
    },

    // 选择热门搜索
    selectTop(name) {
      this.modelNum = name;
    },

    // 顶部按钮
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      console.log("按钮");
    }
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.darkPat {
  background: linear-gradient(0deg, rgba(255, 127, 63, 0.61));
  background-color: #ff3b3e;
  width: 100%;
  .header {
    width: 100%;
    height: 371px;
    .header_container {
      height: 100px;
      background: linear-gradient(0deg, rgba(255, 127, 63, 0.61));
      background-color: #ff3b3e;
      /*左边箭头*/
      @{deep} .van-nav-bar__left,
      .van-nav-bar__right {
        .van-icon {
          font-size: 19px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
      /*中间导航*/
      @{deep} .van-nav-bar__title {
        max-width: 80%;
      }
      .title {
        margin-top: 10px;
        height: 70px;
        font-size: 19px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        .title_nav {
          @{deep} .van-tabs__nav {
            background: linear-gradient(0deg, rgba(255, 127, 63, 0.61));
            background-color: #ff3b3e;
            .van-tab {
              height: 36px;
              font-size: 16px;
              font-family: SourceHanSansCN;
              font-weight: 400;
            }
          }
        }
      }
    }
    .count_down_container {
      width: 100%;
      height: 270px;
      padding-top: 65px;
      .count_down_time {
        width: 300px;
        height: 65px;
        margin: 0 auto;
        .item {
          display: inline-block;
          width: 64px;
          height: 64px;
          line-height: 64px;
          background: rgba(51, 51, 51, 1);
          border-radius: 6px;
          text-align: center;
          font-size: 18px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
        .dot {
          /*display: block;*/
          margin: 0 17px;
          font-size: 17px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
      .notice {
        display: block;
        width: 150px;
        margin: 45px auto;
        font-size: 14px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        opacity: 0.5;
      }
    }
  }
  .select {
    width: 100%;
    .select_tmp {
      height: 88px;
      padding-right: 30px;
      .ropdown_menu_item {
        background: rgba(255, 255, 255, 1);
        /* 左边筛选 */
        .top_select_item {
          padding-bottom: 22px;

        }
        .bottom_select_item {
          border-top: 1px solid rgba(206, 206, 206, 1);
          @{deep} .van-tree-select__nav {
            background: rgba(242, 242, 242, 1);
            .van-sidebar-item {
              height: 64px;
              text-align: center;
              line-height: 44px;
            }
          }
          @{deep} .van-sidebar-item--select {
            border-color: rgba(255, 59, 62, 1);
          }
          @{deep} .van-tree-select__content {
            padding-left: 32px;
            .van-ellipsis {
              height: 64px;
              text-align: center;
              line-height: 64px;
              border-bottom: 1px solid rgba(226, 226, 226, 1);
            }
          }
          @{deep} .van-tree-select__item--active {
            color: rgba(255, 59, 62, 1);
          }
        }
        .bottom_btn {
          width: 100%;
          height: 128px;
          background: rgba(250, 250, 250, 1);
          display: flex;
          justify-content: space-around;
          .select_btn {
            width: 260px;
            height: 58px;
            line-height: 58px;
            margin-top: 35px;
            font-size: 14px;
            font-family: SourceHanSansCN;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            background: rgba(255, 59, 62, 1);
            border-radius: 29px;
          }
          .reset {
            background: rgba(250, 250, 250, 1);
            border: 2px solid rgba(51, 51, 51, 1);
            color: rgba(51, 51, 51, 1);
          }
        }

        /* 中间筛选 */
        .class_select_content {
          width: 100%;
          padding: 0 27px;
        }
      }
      @{deep} .van-dropdown-menu__item {
        .van-dropdown-menu__title {
          .van-ellipsis {
            height: 38px;
            line-height: 38px;
            font-size: 14px;
            font-family: SourceHanSansCN;
            font-weight: 400;
          }
        }
      }

      /*搜索按钮*/
      .search_btn {
        margin-top: 22px;
        width: 98px;
        height: 48px;
        background: rgba(237, 237, 237, 1);
        border: 1px solid rgba(226, 226, 226, 1);
        border-radius: 24px;
        font-family: SourceHanSansCN;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        @{deep} .van-button__icon {
          font-size: 12px;
          font-weight: 600;
          line-height: 24px;
          position: relative;
          left: -10px;
        }
        @{deep} .van-button__text {
          position: relative;
          top: -52px;
          left: 5px;
        }
      }
    }
  }
  // 商品列表
  .goodsList {
    width: 100%;
    padding: 30px;
    background: #f4f4f4;
    .goods_item {
      padding: 30px;
      width: 690px;
      height: 257px;
      background: rgba(255, 255, 255, 1);
      border-radius: 9px;
      margin-bottom: 30px;
      .goods_item_top {
        height: 128px;
        width: 100%;
        border-bottom: 1px solid rgba(226, 226, 226, 1);
        .goods_item_top_left {
          float: left;
          width: 98px;
          height: 98px;
          .goods_item_img {
            width: 98px;
            height: 98px;
          }
        }
        .goods_item_top_right {
          float: left;
          // width: 350px;
          margin-left: 30px;
          .goods_item_right_top {
            height: 34px;
            .goods_item_grade {
              float: left;
              width: 58px;
              height: 34px;
              background: linear-gradient(0deg, rgba(255, 127, 63, 0.3));
              background-color: #ff3b3e;
              border-radius: 17px;
              text-align: center;
              line-height: 34px;
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
            }
            .goods_item_title {
              float: left;
              height: 34px;
              font-size: 32px;
              font-family: PingFang SC;
              font-weight: bold;
              color: rgba(51, 51, 51, 1);
              margin-left: 20px;
            }
          }
          .goods_item_info {
            width: 422px;
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(136, 136, 136, 1);
            line-height: 28px;
            margin-top: 10px;
          }
        }
      }
      .goods_item_bottom {
        height: 68px;
        width: 100%;
        .goods_item_bottom_price {
          float: left;
          margin-top: 20px;
          width:350px;
          height:25px;
          font-size:24px;
          font-family:SourceHanSansCN;
          font-weight:400;
          color:rgba(193,193,193,1);
        }
        .goods_item_bottom_btn {
          float: right;
          margin-top: 10px;
          height:58px;
          line-height: 58px;
          border:2px solid rgba(255,59,62,1);
          border-radius:29px;
          /*font-size:14px;*/
          font-family:SourceHanSansCN;
          font-weight:400;
          color:rgba(255,59,62,1);
        }
      }
    }
  }

  // 右侧搜索弹出层
  .search_popup {
    margin-top: -1px;
    @{deep} .van-popup__close-icon--top-left {
      font-size: 19px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .popup_header {
      width: 100%;
      height: 100px;
      line-height: 100px;
      .title {
        width: 180px;
        height: 36px;
        text-align: center;
        margin: 0 auto;
        /*margin-top: 37px;*/
        font-size: 38px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
    .search_input {
      width: 100%;
      height: 128px;
      padding: 30px;
      background: rgba(237, 237, 237, 1);
      .van-cell-group {
        float: left;
        width: 280px;
        height: 34px;
        border-radius: 34px;
        .search_input_item {
          width: 280px;
          height: 34px;
          border-radius: 34px;
          border: 1px solid rgba(193, 193, 193, 1);
          @{deep}.van-field__body {
            line-height: 34px;
            margin-left: 20px;
          }
        }
      }
      .cancel {
        float: right;
        height: 68px;
        line-height: 68px;
        background: rgba(237, 237, 237, 1);
        font-size: 30px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(136, 136, 136, 1);
      }
    }
    .container {
      width: 100%;
      padding: 0 30px;
      .container_header {
        height: 60px;
        .container_header_title {
          margin-top: 40px;
          font-size: 34px;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
      }
      .container_content_item {
        display: flex;
        // height: 500px;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        .search_item {
          min-width: 220px;
          margin-bottom: 40px;
          height: 68px;
          display: block;
          padding: 20px 30px;
          background: rgba(237, 237, 237, 1);
          border-radius: 9px;
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
  }
}
</style>
